<template>
    <div>
        <el-dialog
        top="5vh"
        :title="title"
        :visible.sync="visible"
        :width="width + 'px'"
        :before-close="onClose"
        :close-on-click-modal="false"
        >
            <div class="container" 
            :style="{height : height+'px'}">
            <slot name= "content"></slot>
            </div>
            <span slot="footer" class="dialog-footer"><el-button @click="onClose">取消</el-button>
            <el-button type="primary" @click="onConfirm">确定</el-button></span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
            title: {type: String,default :"标题",},
            visible: {type: Boolean,default : false,},
            width: {type : Number ,default: 680,},
            height: {type : Number ,default: 250,},
    },
    
    data() {
        return {};
    },
    methods: {
        onClose(){
        this.$emit("onClose");
        },
         onConfirm() {
        this.$emit("onConfirm");
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    overflow-x : initial;
    overflow-y: auto; 
}
.el-dialog__wrapper {
    ::v-deep .el-dialog {
    border-top-left-radius : 7px !important;
    border-top-right-radius: 7px !important;
    .el-dialog__header {
        border-top-left-radius : 7px !important;
        border-top-right-radius : 7px !important;
        background-color : #1890ff;
    .el-dialog--title {
        color:#fff;
        font-size: 15px;
    }
    .el-dialog__close {
        color : #fff;
    }
}

    .el-dialog__body {
        padding: 10px 10px !important;
    }
    .el-dialog__footer {
        border-top: 1px solid #e8eaec !important;
        padding: 16px !important;
    }

  }
}
</style>

    